import React, { useEffect, memo,useState } from 'react';
import { connect } from 'react-redux';
import * as actionTypes from "./store/actionCreators"
import MyInfo from "@/components/my/myInfo/MyInfo"
import MyIcon from "@/components/my/myIcon/MyIcon"
import MyImg from "@/components/my/myImg/MyImg"
import './My.css'
import Scroll from "@/baseUI/scroll"

const My = (props) => {
    // console.log(props, 'props');
    const { mydata, getMyDataDispatch } = props;
    const { icons = [] } = mydata;
    // console.log(icons);
    
    useEffect(() => {
        if (!mydata.length) {
            // console.log('---');
            getMyDataDispatch()
        }
    }, [])
    // console.log(mydata,'mydata');
    return (
            <div className="my">
           
            <MyInfo />
            <MyIcon icons={icons} />
            {/* 以图片代替 */}
            <MyImg/>
            <Scroll>
                <div className="my_padding">
            </div>
            </Scroll>
            </div>
    )
}
const mapStateToprops = (state) => {
    console.log(state, 'state--=-==');
    return {
        mydata: state.my.mydata
    }
}
const mapStateToDispatch = (dispatch) => {
    console.log('----dispatch');
    return {
        getMyDataDispatch() {
            // console.log('-=-');
            dispatch(actionTypes.getMyData())
        }
    }
}
export default connect(mapStateToprops, mapStateToDispatch)(memo(My))